<template>
  <div ref="mapView" class="map-view">
    <!-- 弹窗 -->
    <div ref="popup" class="ol-popup">
      <a @click="popupcloser" class="ol-popup-closer"></a>
      <div class="ol-popup-content" v-html="popupContent"></div>
    </div>
  </div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import Overlay from "ol/Overlay";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
let map = null;
let popup;
export default {
  data() {
    return {
      //
      popupContent: ""
    };
  },
  computed: {},
  methods: {
    init() {
      this.initMap();
      this.initPopup();
    },
    initMap() {
      console.log("map");
      map = new Map({
        target: this.$refs.mapView,
        layers: [
          new TileLayer({
            source: new XYZ({
              url:
                "http://mt{0-3}.google.cn/vt/lyrs=m&scale=2&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile"
            })
          })
        ],
        view: new View({
          center: [-472202, 7530279],
          zoom: 12
        })
      });
    },
    initPopup() {
      // Vienna marker
      popup = new Overlay({
        positioning: "bottom-center",
        element: this.$refs.popup,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [-140 + 48, 0]
      });
      console.log(popup);
      map.addOverlay(popup);
      map.on("singleclick", evt => {
        var coordinate = evt.coordinate;
        this.popupContent = "<p>You clicked here:</p><code>6666</code>";
        popup.setPosition(coordinate);
      });
    },
    initData() {},
    popupcloser() {
      popup.setPosition(undefined);
      //   closer.blur();
      return false;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>

<style lang="scss" scoped>
.map-view {
  width: 100%;
  height: 100%;
  .ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
  }
  .ol-popup:after,
  .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 140px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 140px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
    &:hover {
      cursor: pointer;
      color: #f00;
    }
  }
  .ol-popup-closer:after {
    content: "✖";
  }
}
</style>